<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋对战 - 登录</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

<body>
    <div class="nav">
        <div class="logo">
            <i class="fas fa-chess-board"></i>
            <span>五子棋对战平台</span>
        </div>
    </div>
    <div class="container">
        <div class="card login-container">
            <div class="login-dialog">
                <h3><i class="fas fa-sign-in-alt"></i> 账号登录</h3>
                <div class="row">
                    <span>用户名</span>
                    <input type="text" id="user_name" class="input-field" placeholder="请输入用户名">
                </div>
                <div class="row">
                    <span>密码</span>
                    <input type="password" id="password" class="input-field" placeholder="请输入密码">
                </div>
                <div class="row">
                    <button id="submit" class="btn btn-primary" onclick="login()">登录</button>
                </div>
                <div class="register-link">
                    <a href="/register.html">没有账号？立即注册</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 错误提示弹窗 -->
    <div class="custom-modal" id="errorModal">
        <div class="modal-content">
            <div id="error-content"></div>
            <button class="btn btn-primary" onclick="document.getElementById('errorModal').style.display='none'">确定</button>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        function login() {
            const loginInfo = {
                username: document.getElementById("user_name").value,
                password: document.getElementById("password").value
            };

            if (!loginInfo.username || !loginInfo.password) {
                showError("请输入用户名和密码");
                return;
            }

            $.ajax({
                url: "/login",
                type: "post",
                data: JSON.stringify(loginInfo),
                contentType: "application/json",
                success: function (result) {
                    showError("登录成功，正在进入游戏大厅...", true);
                    setTimeout(() => {
                        window.location.assign("/game_hall.html");
                    }, 1500);
                },
                error: function (xhr) {
                    try {
                        const error = JSON.parse(xhr.responseText);
                        showError(error.reason || "登录失败，请重试");
                    } catch (e) {
                        showError("网络错误，请稍后重试");
                    }
                    document.getElementById("password").value = "";
                }
            });
        }

        function showError(msg, isSuccess = false) {
            const modal = document.getElementById("errorModal");
            const content = document.getElementById("error-content");
            content.textContent = msg;
            // 修复：CSS变量作为字符串传递（添加引号）
            content.style.color = isSuccess ? "var(--success)" : "var(--danger)";
            modal.style.display = "flex";
        }
    </script>
</body>

</html>